<template>
  <div>
    <el-table :data="tableData" row-key="id" border style="width: 50%">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column
        v-for="(item, index) in colList"
        align="center"
        show-overflow-tooltip
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"
        :min-width="item.minWidth"
      >
        <template v-slot="scope">
          <span>
            {{ scope.row[dropCol[index].prop] }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <pre style="text-align: left">
      {{ dropCol }}
    </pre>
    <hr />
    <pre style="text-align: left">
      {{ tableData }}
    </pre>
  </div>
</template>

<script>
import Sortable from "sortablejs";
import colDrap from "./drag";
export default {
  data() {
    return {
      //动态列数组
      colList: [
        {
          label: "日期",
          prop: "date",
          minWidth: 100,
        },
        {
          label: "姓名",
          prop: "name",
          minWidth: 200,
        },
        {
          label: "地址",
          prop: "address",
          minWidth: 300,
        },
      ],
      //拖拽列
      dropCol: [
        {
          label: "日期",
          prop: "date",
          minWidth: 100,
        },
        {
          label: "姓名",
          prop: "name",
          minWidth: 200,
        },
        {
          label: "地址",
          prop: "address",
          minWidth: 300,
        },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "A",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-02",
          name: "B",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-04",
          name: "C",
          address: "No. 189, Grove St, Los Angeles",
        },
        {
          date: "2016-05-01",
          name: "D",
          address: "No. 189, Grove St, Los Angeles",
        },
      ],
    };
  },
  mounted() {
    this.dropCol = colDrap(this.dropCol);
  },
  methods: {},
};
</script>

<style scoped lang="scss">
</style>
